<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海报轮换</title>
    <style>
        #pics{
            width: 658px;
            height: 438px;
            margin: 0 auto;
            position: relative;
        }
        #left{
            position: absolute;
            left:0;
            top:48%;
            cursor: pointer;
        }
        #right{
            position: absolute;
            right: 0;
            top:48%;
            cursor: pointer;
        }
        img{
            width: 658px;
            height: 438px;
        }
    </style>
</head>
<body>
    <div id="pics">
        <a href="https://www.baidu.com"><img src="pictures/1.png" alt="没有该图片"></a>
        <div id="left">
            <button><</button>
        </div>
        <div id="right">
            <button>></button>
        </div>
        <script>
            var arr=["pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png"]
            var index=0
            var left=document.getElementById("left")
            var right=document.getElementById("right")
            var pic=document.getElementsByTagName("IMG")[0]
            right.onclick=function (){
                index+=1;
                pic.setAttribute("src",arr[index%arr.length])
                console.log(index%arr.length)
                console.log(arr[index%arr.length])
            }
            left.onclick=function (){
                index-=1;
                if (index<0){
                    index=arr.length-1
                }
                console.log(index)
                pic.setAttribute("src",arr[index%arr.length])
                console.log(arr[index%arr.length])
            }
        </script>
    </div>
</body>
</html>